% !Mode:: "TeX:UTF-8"

\chapter{饿了么前端项目}

\section{需求分析}

本项目要求使用使用 HTML+CSS+JS 技术，参照“饿了么网页版”开发企业级静态网页。通过运行“饿了么前端项目”，演示项目成果，要求演示页面和饿了么网页版达到高度相似，并能够实现静态网页的跳转、显示和隐藏等基本功能。

\begin{enumerate}[label={[\arabic*]}]
    \item 首页\\
          主要功能：显示商家列表信息\\
          动作：
          \begin{itemize}
              \item 点击点餐分类小图片，跳转到商家列表页面
              \item 点击下方菜单栏中的“订单”跳转到历史订单页面
          \end{itemize}

    \item 商家列表\\
          主要功能：显示商家列表信息\\
          动作：点击某个商家，跳转到此商家的详细信息页面

    \item 商家详细信息页面\\
          主要功能：显示商家详细信息及所属食品信息\\
          动作：点击“去结算”按钮，跳转到确认订单页面

    \item 确认订单页面\\
          主要功能：
          \begin{itemize}
              \item 显示订单信息
              \item 选择送货地址
          \end{itemize}
          动作：
          \begin{itemize}
              \item 点击送货地址，跳转到送货地址列表页面
              \item 点击“去支付”按钮，跳转到支付页面
          \end{itemize}

    \item 在线支付页面\\
          主要功能：显示订单信息及订单明细信息

    \item 登录页面\\
          主要功能：用户登录\\
          动作：
          \begin{itemize}
              \item 点击“登陆”按钮，跳转到上一个页面
              \item 点击“去注册”按钮，跳转到注册页面
          \end{itemize}

    \item 注册页面\\
          主要功能：注册新用户\\
          动作：点击“注册”按钮，跳转到登陆页面

    \item 历史订单页面\\
          主要功能：显示用户历史订单信息\\
          动作：点击某个历史订单，可以对订单明细信息进行显示和隐藏
\end{enumerate}


\section{项目技术、架构与设计}

\subsection{涉及的技术点}
\begin{itemize}
    \item HTML5 标签的使用
    \item CSS3 样式的使用
    \item JS 对 DOM 的基本操作
    \item DIV+CSS 布局基础
    \item 移动端布局基础
    \item viewport 设置
    \item 弹性布局
    \item 边框盒子模型
    \item vw 与 vh 的使用
    \item 图片按比例自适应
    \item CSS3 小图标的使用
    \item 第三方字体库的使用
\end{itemize}
\subsection{实施流程}

\begin{enumerate}[label={[\arabic*]}]
    \item 创建elm\_demo前端工程
    \item 放入font\-awesome第三方字体库包
    \item 放入img图片包
    \item 添加 reset.css 共通 CSS 文件
    \item 根据需求创建 HTML 文件 
    \item 根据需求创建 CSS 文件 
    \item 根据需求创建 javaScript 文件
\end{enumerate}

\subsection{软件构架}
\begin{itemize}
    \item css文件夹： 存放css文件
    \item framework文件夹： 存放第三方库文件，以及一些共通的css文件（自定义css图标、css重置） 
    \item img文件夹： 存放图片 
    \item js文件夹： 存放js文件
    \item html文件： 使用 HTML 技术完成前端静态网页应用程序的实现
    \item css文件： 使用 CSS 技术对网页进行样式渲染。
    \item Js文件： 使用 JavaScript 语言制作网页特效
\end{itemize}

\subsection{软件设计}

\subsubsection{移动端开发之viewport}
问题的提出：
移动设备的屏幕尺寸多样，与PC端屏幕的统一尺寸不同。
这导致在移动设备上显示网页时，由于尺寸问题，可能会出现网页显示不完整，需要横向滚动的情况。
为了解决这个问题，引入了viewport（屏幕视口）的概念。

解决方案：\\
viewport有三种：
\begin{enumerate}[label={(\arabic*)}]
    \item layout viewport（布局视口）：网页实际尺寸，或者说，网页实际有多大，layout viewport就有多大。
    \item ideal viewport（理想视口）：移动设备理想viewport，也就是实际屏幕尺寸，根据机型的不同，尺寸也不尽相同。
    \item visualviewport（视觉视口）：为了解决上述问题，我们可以使用viewport来调整用户所看到的视口区域。
    首先，将网页放入布局视口（layout viewport），然后按比例缩小布局视口以适应理想视口（ideal viewport）。
    通过这样的方式，无论网页的尺寸如何，都能在手机屏幕上完整显示，而且不会出现横向滚动条。
\end{enumerate}

总结：\\
移动端网页开发时，都要加上这样一段代码：

$<$\textcolor{green}{meta} \textcolor{blue}{name}=\textcolor{red}{"viewport"} \textcolor{blue}{content}=\textcolor{red}{"width=device-width,initial-scale=1"}$>$

width就是网页实际尺寸，也就是layout viewport。 device-width就是屏幕实际尺寸，也就是ideal viewport。 所
以，width=device-width就是将layout viewport按照ideal viewport实际尺寸来显示。

\subsubsection{视口尺寸}
视口：在PC端，指浏览器的可视区域；\\
在移动端，指Viewport 中的 Layout Viewport。 \\
视口尺寸常用的有以下2 个： 
\begin{itemize}
    \item vw: 1vw 等于视口宽度的1\% 
    \item vh: 1vh 等于视口高度的1\% 
\end{itemize}
实际应用中，可以使用vw，实现元素宽度和高度成 比例自动缩放。

\subsubsection{边框盒子模型}
CSS3之前的盒子模型可以被称为content-box型盒子，其中宽度和高度仅包括内容部分。
而在CSS3之后，新增了一个盒子模型，称为border-box型盒子，其中宽度和高度包括了边框。
通过使用box-sizing属性，我们可以设置盒子模型的类型。

总结：使用了边框盒子，就可以任意设置内边距、边框了，而且不用担心会改变盒子的总体尺寸。

\subsubsection{字体图标}
引用第三方字体图标库Font Awesome。\\
使用自定义定位图标icon.css

\subsubsection{js特效}
为了实现将首页顶部搜索框固定在顶部的效果，可以使用scroll事件来解决。这个事件可以同时在PC端和移动端生效。
对于PC端，可以使用document.documentElement.scrollTop来获取滚动条的位置。
对于移动端，可以使用document.body.scrollTop来获取滚动条的位置。
当滚动条的位置超过视口宽度的12%时，可以将搜索块应用固定定位，从而实现将搜索框固定在顶部的效果。


\section{项目团队与分工}

主要分工如下：
\begin{itemize}
    \item 肖鹏飞：首页、确认订单页面，页面链接检查善，文档编写 
    \item 胡瑞琰：商家列表、商家信息、在线支付、我的订单、注册与登录页面，文档编
    写
\end{itemize}

\section{项目测试}
\subsection{首页js特效测试}
对于首页顶部固定块的实现，我们进行了以下测试：

在完成index.js的代码后，我们对结果进行了测试。
然而，我们发现无法如期实现所需效果。
经过仔细检查后，我们发现是index.html文件中的<div class="search-fixed-top" id="fixedBox">这一行缺少了id="fixedBox"导致的。
该代码用于将搜索框悬浮并固定在顶部。
在进行了修改后，我们再次进行了测试，并如期实现了所需的效果。


\subsection{静态网页演示测试}

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_1}
    \caption{运行项目进入首页}
    \vspace{\baselineskip}
\end{figure} 

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_2}
    \caption{点击早餐按钮进入商家列表}
    \vspace{\baselineskip}
\end{figure} 

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_3}
    \caption{点击任意商家进入商家信息页面}
    \vspace{\baselineskip}
\end{figure} 

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_4}
    \caption{点击“去结算”按钮进入订单页面}
    \vspace{\baselineskip}
\end{figure} 

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_5}
    \caption{点击“去支付”按钮进入在线支付页面}
    \vspace{\baselineskip}
\end{figure} 

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_6}
    \caption{点击“订单”按钮进入“我的订单”页面}
    \vspace{\baselineskip}
\end{figure} 

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_7}
    \caption{登录页面}
    \vspace{\baselineskip}
\end{figure} 


\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_8}
    \caption{点击去注册进入注册页面}
    \vspace{\baselineskip}
\end{figure} 

\begin{figure}[htbp]
    \centering
    \includegraphics[width=0.4\textwidth]{P2_9}
    \caption{点击注册返回登录页面}
    \vspace{\baselineskip}
\end{figure} 



经测试，所有页面都能正常显示，页面之间也能够正常切换。前端项目测试通过。




